<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0px; padding: 0px }
            #map_canvas { height: 100%; background-color: #666970; }
        </style>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
            function initialize() {
                var latlng = new google.maps.LatLng(52, 0);
                var myOptions = {
                    zoom: 14,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControl: false,
                    navigationControl: true,
                    streetViewControl: false,
                    backgroundColor: "#666970"
                };
 
                document.markermap = new Array();
                document.geocoder = new google.maps.Geocoder();
                document.map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
                
                document.fitAllMarkers = function fitAllMarkers() {
                    var keys = document.keys();
                    var bounds = new google.maps.LatLngBounds();
                    for (var i=0, len = keys.length; i < len; i++) {
                        bounds.extend(document.markermap[keys[i]].getPosition());
                    }
                    document.map.fitBounds(bounds);
                }
                
                document.removeAllMarkers = function removeAllMarkers() {
                    var keys = document.keys();
                    for (var i=0, len = keys.length; i < len; i++) {
                        document.markermap[keys[i]].setMap(null);
                        delete document.markermap[keys[i]];
                    }
                }
                
                document.keys = function keys() {
                    var keys = [];
                    for(var key in document.markermap) {
                        if(document.markermap.hasOwnProperty(key)) {
                            keys.push(key);
                        }
                    }
                    return keys;
                }
 
                document.zoomIn = function zoomIn() {
                    var zoomLevel = document.map.getZoom();
                    if (zoomLevel <= 20) document.map.setZoom(zoomLevel + 1);
                }
 
                document.zoomOut = function zoomOut() {
                    var zoomLevel = document.map.getZoom();
                    if (zoomLevel > 0) document.map.setZoom(zoomLevel - 1);
                }
 
                document.setMapTypeRoad = function setMapTypeRoad() {
                    document.map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
                }
                document.setMapTypeSatellite = function setMapTypeSatellite() {
                    document.map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
                }
                document.setMapTypeHybrid = function setMapTypeHybrid() {
                    document.map.setMapTypeId(google.maps.MapTypeId.HYBRID);
                }
                document.setMapTypeTerrain = function setMapTypeTerrain() {
                    document.map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
                }
    
                document.addMarker = function addMarker(lat, lon, imguri, label) {
                    var image = new google.maps.MarkerImage(imguri,
                    new google.maps.Size(40,35),    // size of the image
                    new google.maps.Point(0,0), // origin, in this case top-left corner
                    new google.maps.Point(20,35)    // anchor, i.e. the point half-way along the bottom of the image
                );
                    var marker = new google.maps.Marker({
                        map: document.map,
                        position: new google.maps.LatLng(lat, lon),
                        icon:image,
                        title:label
                    });
                    document.markermap[label]=marker;
                }
                
                document.removeMarker = function removeMarker(label) {
                    document.markermap[label].setMap(null);
                    delete document.markermap[label];
                }
 
                document.goToLocation = function goToLocation(searchString) {
                    document.geocoder.geocode( {'address': searchString}, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            document.map.setCenter(results[0].geometry.location);
                        } else {
                            alert("Geocode was not successful for the following reason: " + status);
                        }
                    });
                }
            }
        </script>
    </head>
    <body onload="initialize()">
        <div id="map_canvas" style="width:100%; height:100%"></div>
    </body>
</html>